import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import { Button, Space, NavBar, Badge, List, Tabs, Avatar, Tag } from 'antd-mobile'
// 移除图标导入，使用emoji替代
import './Message.css'

function MessageCenter() {
    const [activeTab, setActiveTab] = useState('all');
    const [messages, setMessages] = useState([]);

    // 模拟消息数据
    useEffect(() => {
        const mockMessages = [
            {
                id: 1,
                type: 'system',
                title: '系统通知',
                content: '您的账户已完成实名认证，可以正常接单了！',
                time: '10分钟前',
                isRead: false,
                priority: 'high'
            },
            {
                id: 2,
                type: 'order',
                title: '订单消息',
                content: '您有一个新的外卖配送订单，请及时查看并确认接单。',
                time: '30分钟前',
                isRead: true,
                priority: 'normal'
            },
            {
                id: 3,
                type: 'reward',
                title: '收益提醒',
                content: '恭喜您完成今日第10单，获得额外奖励5元！',
                time: '1小时前',
                isRead: false,
                priority: 'high'
            },
            {
                id: 4,
                type: 'system',
                title: '维护通知',
                content: '系统将于今晚22:00-24:00进行维护，期间可能影响接单功能。',
                time: '2小时前',
                isRead: true,
                priority: 'normal'
            },
            {
                id: 5,
                type: 'order',
                title: '订单完成',
                content: '您的订单#20231201001已完成配送，客户已确认收货。',
                time: '3小时前',
                isRead: true,
                priority: 'normal'
            }
        ];
        setMessages(mockMessages);
    }, []);

    const tabs = [
        { key: 'all', title: '全部', count: messages.length },
        { key: 'unread', title: '未读', count: messages.filter(m => !m.isRead).length },
        { key: 'system', title: '系统', count: messages.filter(m => m.type === 'system').length },
        { key: 'order', title: '订单', count: messages.filter(m => m.type === 'order').length }
    ];

    const getMessageIcon = (type) => {
        switch (type) {
            case 'system':
                return <span className="message-icon system">⚙️</span>;
            case 'order':
                return <span className="message-icon order">📦</span>;
            case 'reward':
                return <span className="message-icon reward">🔔</span>;
            default:
                return <span className="message-icon">💬</span>;
        }
    };

    const getPriorityColor = (priority) => {
        switch (priority) {
            case 'high':
                return 'danger';
            case 'normal':
                return 'primary';
            default:
                return 'default';
        }
    };

    const markAsRead = (messageId) => {
        setMessages(prev => 
            prev.map(msg => 
                msg.id === messageId ? { ...msg, isRead: true } : msg
            )
        );
    };

    const deleteMessage = (messageId) => {
        setMessages(prev => prev.filter(msg => msg.id !== messageId));
    };

    const filteredMessages = messages.filter(message => {
        if (activeTab === 'unread') return !message.isRead;
        if (activeTab === 'system') return message.type === 'system';
        if (activeTab === 'order') return message.type === 'order';
        return true;
    });

    return (
        <div className="message-container">
            {/* 顶部标题栏 */}
            <div className="message-header">
                <h2>消息中心</h2>
                <div className="header-actions">
                    <Button size="small" fill="outline" className="action-btn">
                        全部已读
                    </Button>
                    <Button size="small" fill="outline" className="action-btn">
                        清空消息
                    </Button>
                </div>
            </div>

            {/* 标签页 */}
            <div className="tabs-section">
                <Tabs activeKey={activeTab} onChange={setActiveTab}>
                    {tabs.map(tab => (
                        <Tabs.Tab 
                            title={
                                <div className="tab-title">
                                    {tab.title}
                                    {tab.count > 0 && (
                                        <Badge content={tab.count} className="tab-badge" />
                                    )}
                                </div>
                            } 
                            key={tab.key} 
                        />
                    ))}
                </Tabs>
            </div>

            {/* 消息列表 */}
            <div className="messages-section">
                {filteredMessages.length > 0 ? (
                    <List className="message-list">
                        {filteredMessages.map(message => (
                            <List.Item
                                key={message.id}
                                className={`message-item ${!message.isRead ? 'unread' : ''}`}
                                onClick={() => markAsRead(message.id)}
                            >
                                <div className="message-content">
                                    <div className="message-avatar">
                                        {getMessageIcon(message.type)}
                                        {!message.isRead && (
                                            <div className="unread-dot"></div>
                                        )}
                                    </div>
                                    
                                    <div className="message-info">
                                        <div className="message-header-row">
                                            <h4 className="message-title">{message.title}</h4>
                                            <div className="message-meta">
                                                <Tag 
                                                    color={getPriorityColor(message.priority)} 
                                                    fill="outline" 
                                                    size="small"
                                                >
                                                    {message.priority === 'high' ? '重要' : '普通'}
                                                </Tag>
                                                <span className="message-time">{message.time}</span>
                                            </div>
                                        </div>
                                        
                                        <p className="message-content-text">{message.content}</p>
                                        
                                        <div className="message-actions">
                                            <Button 
                                                size="mini" 
                                                fill="outline" 
                                                className="action-btn"
                                                onClick={(e) => {
                                                    e.stopPropagation();
                                                    markAsRead(message.id);
                                                }}
                                            >
                                                {message.isRead ? '已读' : '标记已读'}
                                            </Button>
                                            <Button 
                                                size="mini" 
                                                fill="outline" 
                                                className="action-btn delete-btn"
                                                onClick={(e) => {
                                                    e.stopPropagation();
                                                    deleteMessage(message.id);
                                                }}
                                            >
                                                🗑️
                                                删除
                                            </Button>
                                        </div>
                                    </div>
                                </div>
                            </List.Item>
                        ))}
                    </List>
                ) : (
                    <div className="empty-state">
                        <div className="empty-icon">💬</div>
                        <p>暂无消息</p>
                        <p className="empty-tip">有新消息时会在这里显示</p>
                    </div>
                )}
            </div>

            {/* 底部统计 */}
            <div className="message-stats">
                <div className="stat-item">
                    <span className="stat-label">总消息数</span>
                    <span className="stat-value">{messages.length}</span>
                </div>
                <div className="stat-item">
                    <span className="stat-label">未读消息</span>
                    <span className="stat-value unread">{messages.filter(m => !m.isRead).length}</span>
                </div>
                <div className="stat-item">
                    <span className="stat-label">重要消息</span>
                    <span className="stat-value important">{messages.filter(m => m.priority === 'high').length}</span>
                </div>
            </div>
        </div>
    );
}

export default MessageCenter;
